<template>
  <view class="back-wrap" :class="grey ? 'grey' : ''">
    <view class="back" @click="handleBack">
      <image src="/static/images/common/back.png"></image>
    </view>
    <text>{{ backTitle }}</text>
  </view>
</template>

<script>
export default {
  name: 'back',
  props: {
    backTitle: {
      type: String,
      default: '我的作业'
    },
    grey: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: -1,
        animationType:'pop-out'
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.back-wrap{
  padding-top: 20upx;
  box-sizing: border-box;
  width: 100%;
  height: 154upx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .back{
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: center;
    top:20upx;
    left:0;
    height: 134upx;
    width: 60upx;
    &:active{
      background-color: #f5f5f5;
    }
    image {
      width:40upx;
      height:45upx;
    }
  }
  text {
    font-size:42upx;
    line-height: 154upx;
    color: #333;
  }
}
.back-wrap.grey{
  background-color: #f0f0f0;
}
</style>